<template>
  <div class="table-style">
    <div class="filter-container">
      搜索内容：
      <el-input
        placeholder="请输入搜索内容"
        v-model="listQuery.Name"
        clearable
        style="width: 200px; margin: 0 10px 0 0;"
        class="filter-item"
      />
      <el-select
        placeholder="品牌选择"
        v-model="listQuery.BrandId"
        clearable
        style="width: 120px; margin: 0 10px 0 0;"
        class="filter-item"
      >
        <el-option
          v-for="item in Brandlist"
          :key="item.Id"
          :label="item.Name"
          :value="item.Id"
        ></el-option>
      </el-select>
      <el-button
        style="margin-bottom: 0;"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >
        搜索
      </el-button>
      <el-button type="primary" @click="dialogFormVisible = true">添加样板间</el-button>
    </div>
    <el-table :data="roomList" stripe fitv-loading:loading
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      border
      style="width: 100%;"
      v-loading="listLoading"
    >
      <el-table-column width="60" type="index" label="序号"></el-table-column>
      <el-table-column width="180" prop="Img" label="样板间图片">
        <template slot-scope="scope">
          <div @click="handleProductImg(scope.row.Room.Id)">
            <img  v-if="scope.row.Img.length > 0" class="img-style" :src="'http://192.168.38.2:8091'+scope.row.Img[0].Img"  min-width="100"  height="100"  />           
            <img v-else src="/public/addImg.png" min-width="100"  height="100" />
          </div>
          
        </template>
      </el-table-column>
      <el-table-column  prop="Room.Name" label="样板间名称"></el-table-column>
      <el-table-column  prop="Room.Url3d" label="3D链接"></el-table-column>
      <el-table-column width="80" prop="Room.BrandId" label="品牌">
        <template slot-scope="scope">
           <div v-for="item in  Brandlist" :key="item.Id" v-if="item.Id == scope.row.Room.BrandId">
               {{item.Name}}
           </div>
        </template>
      </el-table-column>
      <el-table-column width="80" prop="Room.Sort" label="排序"></el-table-column>
      <el-table-column label="设置">
        <template slot-scope="scope">
          <el-button
           type="danger"
            size="mini"
            @click="handleEdit(scope.row.Room.Id)"
          >
            修改样板间
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="GetRoomList"
    />

    <!-- 添加样板间 -->
    <el-dialog title="添加样板间" :visible.sync="dialogFormVisible" width="80%">
      <el-form :inline="true" :model="room" :rules="rules" ref="room" label-width="130px">
        <el-form-item label="样板间名称"  prop="Name">
          <el-input v-model="room.Name"></el-input>
        </el-form-item>
        <el-form-item label="品牌"  prop="BrandId">
          <el-select v-model="room.BrandId" placeholder="请选择品牌">
            <el-option label="金豹" value="1"></el-option>
            <el-option label="黑金" value="3"></el-option>
            <el-option label="白金" value="4"></el-option>
            <el-option label="雪豹" value="5"></el-option>
            <el-option label="云豹" value="6"></el-option>
            <el-option label="智慧" value="7"></el-option>
            <el-option label="DUKE" value="8"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="样板间描述" prop="Info">
          <el-input v-model="room.Info"></el-input>
        </el-form-item>
        <el-form-item label="浏览量" prop="ViewCount">
          <el-input v-model="room.ViewCount"></el-input>
        </el-form-item>
        <el-form-item label="3D漫游图" prop="Url3d">
          <el-input v-model="room.Url3d"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="Sort">
          <el-input v-model="room.Sort"></el-input>
        </el-form-item>
         <el-form-item label="Id" prop="Id" style="display:none">
          <el-input v-model="room.Id"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button v-if="room.Id" type="primary" @click="handleModifyRoom('room')">
          修改
        </el-button>
        <el-button v-else type="primary" @click="handleAddRoom('room')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { roomList, addRoom } from '@/api/mdlist'
export default {
  components: { Pagination },
  data() {
    return {
      roomList: [],
      listLoading: true,
      Brandlist: [],
      dialogFormVisible: false,
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        Name: undefined, //搜索内容
        BrandId: undefined, //品牌ID
      },
      room: {
        BrandId: '',
        Name: '',
        Info: '', //描述
        ViewCount: 0,
        Url3d: '',
        Sort: 0,
      },
      rules:{
        Name: [
         { required: true, message: '请输入样板间名称', trigger: 'blur' }
        ],
        BrandId: [
          { required: true, message: '请选择品牌', trigger: 'change' }
        ],
        Info: [
          { required: true, message: '请输入样板间描述', rigger: 'blur' }
        ],
        Url3d: [
          { required: true, message: '请输入3D漫游图链接', rigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.GetRoomList()
  },
  methods: {
    GetRoomList() {
      this.listLoading = true
      roomList(this.listQuery).then((res) => {
        if (res.data.msg === 'success') {
          this.roomList = res.data.list
          this.Brandlist = res.brandlist
          this.total = res.data.total
          this.listLoading = false
        }
      })
    },

    //添加样板间
    handleAddRoom(room) {
      this.$refs[room].validate((valid) => {
        if (valid) {
            //提交
            let room = this.room
            room.BrandId = Number(room.BrandId)
            room.ViewCount = Number(room.ViewCount)
            room.Sort = Number(room.Sort)
            addRoom(room).then((res)=> {
              if (res.code === 0) {
                alert('添加成功')
                this.dialogFormVisible = false
                this.GetRoomList()
              }
            })
        } else {
          console.log('error submit!!');
          return false;
        }

      })     
         
    },
  
    //添加样板间图片
    handleProductImg(id) {
      console.log(id)
       this.$router.push({ name: 'cbd-roomimg', query: { id: id } })
    },

    //修改样板间
    handleEdit(RoomId){
      let idx =  this.roomList.findIndex(v => v.Room.Id === RoomId)
       if (idx != -1) {
         this.room = this.roomList[idx].Room;
         this.dialogFormVisible = true  
       }
    },
    
    //修改样板间
    handleModifyRoom(){
      let room = this.room
      room.BrandId = Number(room.BrandId)
      room.ViewCount = Number(room.ViewCount)
      room.Sort = Number(room.Sort)
      addRoom(room).then((res)=> {
        if (res.code === 0) {
          alert('修改成功')
          this.dialogFormVisible = false
          this.GetRoomList()
          }
      })
    },

    //搜索商品
    handleSearch() {
      this.listQuery.page = 1
      this.GetRoomList()
    },
  },
}
</script>

<style>
.filter-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.table-style {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.img-style {
  cursor: pointer;
}
</style>
